<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京站智能网格化管理系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/common.css">
    <link rel="stylesheet" href="../lib/css/iconFont/iconfont.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/count.css"> -->
    <link rel="stylesheet" href="../lib/css/pagination.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/station.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/newcount.css">
</head>
<body>
<div class="station_grid wraper">
    <div class="searchwrap">
        <!-- 月季年 -->
        <div class="searchelm searchtime2">
            <div class="select2_wrap" style="min-width:10rem;max-width:60%;">
                <select name="fdep" id="fdep" class="fdep" style="width:100px;"></select>
            </div>
            <select name="" id="status" class="select_option status">
                <option value="0">全部</option>
                <option value="1">已完成</option>
                <option value="2">未完成</option>
            </select>
            <select name="" class="select_option select_option0 select_option3 none" id="select_year">
                <option value="1" class="option_year">年</option>
                <option value="2" class="option_quart">季</option>
                <option value="3" class="option_month">月</option>
            </select>
            <select name="" class="select_option" id="select_month">
                <!-- <option value="">2017</option> -->
            </select>
            <select name="" class="select_option select_quarter3" id="select_quarter">
                <!-- <option value=""></option> -->
            </select>
            <input type="button" value="查询" id="lookUp2" class="lookUp" />
        </div>
        <!-- 图表导出 切换 -->
        <div class="tabbar clearfix">
            <ul class="tab">
                <li class="tab_li"><i class="icon iconfont icon-tubiao"></i>图形</li>
                <li class="tab_li tab_li_click"><i class="icon iconfont icon-biaoge"></i>表格</li>
                <li class="tab_li"><i class="icon iconfont icon-daochu"></i>导出</li>
            </ul>
        </div> 
    </div>

    <!-- echarts统计图表 -->
    <div class="main_content">
        <!-- 干部网格巡视统计 -->
        <div class="mcharts nan" id="chart" style="width:100%;height:100%;"></div>
        <!-- 人员表格 -->
        <div class="station_shaow_detail main_table_wrap nan">
            <table class="station_shaow_detail_table main_table">
                <caption style="font-size: 2.4rem;">干部网格巡视统计表</caption>
            </table>
                <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string">
            </div>
        </div>
        <!-- 下钻信息表 -->
        <div class="station_shaow_detail drilldown" style="display:none">
            <div class="div_close">
                <p class="p_close"><a href="#" class="" style="">《&nbsp;返回</a></p>
            </div>
            <div class="drilldown_info">
                <!-- 明细表 -->
                <table class="station_shaow_detail_table drilldown_table">
                <caption style="font-size: 2.4rem;">干部网格巡视详情</caption>
                </table>
            </div>
            <div class="interim">
                <div class="M-box1" id="page_string1"></div>
            </div>
        </div>
        <div class="lds-css block">
            <div class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- <script type="text/javascript" src="/assets/js/jquery.1.10.1.js"></script> -->
<script type="text/javascript" src="../lib/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/js/base.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/jquery.pagination.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/echarts.js"></script>
<script type="text/javascript" src="../lib/js/count.js"></script>
<script type="text/javascript">
var chart=echarts.init(document.getElementById("chart"));
$('.mcharts').hide()
var page = 1 ,page2=1,common=1,isDtail=false,detailUserId='',detailName='';//页数
$('.fdep').rpSelect({url:serverUrl.base+serverUrl.Fdep,multiple:false,hasAll:true,calfn:function(){time()}})
//查询
$("#lookUp2").click(function () { 
    common_request()
});

//统计图
function deviceGridRepairChart(data){
    $('.lds-css').addClass('block')
    //统计图
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.countQ+'get_leader',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            // 根据数据库取到结果拼接现在结果
            var _data = res.data
            _data.title = '干部网格巡视任务统计图'
            _data.legend=['已接任务数','完成任务数']
            _data.chartxname = _data.UserName
            _data.chartxdata = [_data.num,_data.wnum]
            refreshChart(_data);
        }
    });
}
//表格
function deviceGridRepairTable(data){
    $('.lds-css').addClass('block')
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.countQ+'get_leadertable',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            // 根据数据库取到结果拼接现在结果
            var _talbedata = res.resultinfo.list
            $('.main_table').createTable({data:_talbedata,columns:[
                {name:'序号',field:'',ids:1,w:'4rem'},
                {name:'工号',field:'user_account',w:'4rem'},
                {name:'姓名',field:'user_name',w:'10rem'},
                {name:'部门',field:'department_name',w:'10rem'},
                {name:'量化任务数',field:'sum_number',w:'8rem'},
                {name:'已巡视网格次数',field:'sum_end_number',w:'8rem'},
                {name:'未巡视网格次数',field:'',render:function(index,elm,data,tr){
                    return Number(data.sum_number)-Number(data.sum_end_number)<=0?0:Number(data.sum_number)-Number(data.sum_end_number)
                },w:'8rem'},
                {name:'详情',field:'user_id',w:'8rem',render:function(index,elm,data,tr){
                    var _btn = '<span class="black1 black_act detail" data-rel=\"'+ elm +'\">查看详情</span>',$btn = $(_btn)
                    return _btn
                }}
            ]})
            $("#page_string").html(res.resultinfo.obj);
            $('.detail').off('click.checkdetail').on('click.checkdetail',function(){
                common=1;
                isDtail=true
                detailUserId=$(this).data('rel');
                common_request()
                
            })
            
        }
    });
}
function deviceGridRepairTableDropDown(data){
    $('.lds-css').addClass('block')
    var _data = data
    var _url=serverUrl.base+serverUrl.countQ+'get_leadertable'
    //console.log(_data)
    if(common == 2){
        _url = serverUrl.base+serverUrl.countQ+'get_leader'
    }
    $.ajax({
        url: _url,
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            $('.station_shaow_detail').hide()
            $('.ecahrts_style').hide()
            $('.drilldown').show()
            // 根据数据库取到结果拼接现在结果
            var _data = res.resultinfo.list
            $('.drilldown_table').createTable({data:_data,columns:[
                {name:'工号',field:'user_account',w:'4rem'},
                {name:'姓名',field:'user_name',w:'10rem'},
                {name:'部门',field:'department_name',w:'10rem'},
                {name:'巡视网格',field:'grid_name',w:'10rem'},
                {name:'任务完成区间',field:'start_time',render:function(index,elm,data){
                    return elm + '~'+ data.end_time
                },w:'8rem'},
                {name:'任务次数',field:'number',w:'8rem'},
                {name:'完成次数',field:'finish_number',w:'8rem'},
                {name:'最近完成时间',field:'addtime',w:'8rem'}
            ]})
            $("#page_string1").html(res.resultinfo.obj);
            
        }
    });
}
$('.div_close').on('click',function(){
    page = 1
    isDtail=false
    $('.drilldown').hide()
    $('.searchtime2').show()
    if(common == 1){
        $('.main_table_wrap').show()       
    }else{
        $('.mcharts').show()
    }
})

//统计图 样式
function refreshChart(data){
    var _data=data
    chart.setOption({
    title:{
      text:_data.title,
      x:"center",
      y:"top",
      textStyle:{
        color:"#fff",
        fontSize:30
      }
    },
    tooltip:{
      trigger:"axis",
      axisPointer:{
        type:"shadow"
      },
    },
    legend:{
      data:_data.legend,//标记名
      right:"10%",
      y:"15%",
      textStyle:{
        color:"#fff",
        fontSize:16,
        
      }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show:true,
                excludeComponents :['toolbox'],
                pixelRatio: 2
            }
        }
    },
    grid:{
        left:'14%',
        right:'10%',
        bootom:"3%",
        top:"30%",
        vontainLabel:true
    },
    xAxis:{
      type:"category",
      data:_data.chartxname,
      axisTick:{
        alignWithLabel:true
      },
      axisLabel:{
        interval:0,
        show:true,
        margin:2,
        textStyle:{
          color:"#fff"
        }
      },
      axisLine:{
        lineStyle:{
            color:"#666"
        }
      }
    },
    yAxis:{
      type:"value",
      axisLine:{
            lineStyle:{
                color:"#666"
            }
        },
      axisLabel:{
        show:true,
        textStyle:{
          color:"#fff"
        }
      }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show:true,
                excludeComponents :['toolbox'],
                pixelRatio: 2,
                left:"right"
            }
        }
    },
    series:[{
                name:_data.legend[0],
                type:"bar",
                data:_data.chartxdata[0],
                barGap: 0,
                // label: labelOption,
                itemStyle:{
                    normal:{
                        color:"#5AB1EF",
                        label:{
                            show:false,
                            position:"insideTop",
                            
                        }
                    }
                }
            },
                {
                    name:_data.legend[1],
                    type:"bar",
                    data:_data.chartxdata[1],
                    itemStyle:{
                        normal:{
                            color:"#FFB980",
                            label:{
                                show:false,
                            }
                        }
                    }
                }]
   
  })
}

// 下钻信息
chart.on('click',function(param){
    // console.log(param)
    $('.searchtime2').hide()
    detailName=param.name;
    common=2;
    isDtail=true
    $('.mcharts').hide() 
    common_request()    
})
function common_request(elm){
    if(arguments[0]){
        page = arguments[0]
    }else{
        page = 1
    }
    //统计表
    var type = $("#select_year option:selected").val();
    var year = $("#select_month option:selected").val();
    var quarter = $("#select_quarter option:selected").val();
    var _data = {
        page:page,
        year:year,
        month:'',
        quarter:''
    }
    if(type == '1'){
        //year
        _data.month = ''
        _data.quarter = ''

    }else if(type == '2'){
        //quarter
        _data.month = ''
        _data.quarter = quarter
    }else if(type == '3'){
        //month
        _data.month = quarter
        _data.quarter = ''
    }
    _data.dept_id = $('.fdep').val()=='none'?'0':$('.fdep').val()
    _data.status = $('.status').val()
    if(isDtail){
        if(common == 1){
            _data.pid = detailUserId
        }else{
            _data.name = detailName
        }
        deviceGridRepairTableDropDown(_data)
    }else{
        if(common == 1){
            deviceGridRepairTable(_data)
        }else if(common == 2){
            _data.status = 0
            deviceGridRepairChart(_data)
        }
        
    }
}

//tab初始化
$('.tab .tab_li').each(function(index,elm){
    //console.log(index,elm)
    $(this).data('rel',index)
})
//图表切换后的操作
$('.tab_li').on('click',function(elm){
    var $this = $(this)
    page = 1;
    page2 = 1;
    var _ids = $this.data('rel')?$this.data('rel'):$this.index()
    $('.searchtime2').show()
    if(_ids== '0'){
        $('.status').hide()
        $('.drilldown').hide()
        common = 2;
        isDtail = false
        common_request()
    }else if(_ids== '1'){
        $('.status').show();
        $('.drilldown').hide();
        isDtail = false
        common = 1
        common_request()
    }else if(_ids== '2'){
        //导出按钮
        var year = $("#select_month option:selected").text();
        var month = $("#select_quarter option:selected").val();
        var dept_id = $('.fdep').val()=='none'?'0':$('.fdep').val()
        var status = $('.status').val()
        var _url=serverUrl.base + serverUrl.countQ + 'export_leader?year='+year+'&month='+month+'&dept_id='+dept_id+'&status='+status;
        window.location.href = _url;return;
    }
})
</script>
</html>

